<template>
    <div id="customer" >
        <van-nav-bar
        title="智能客服"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="content" ref="container">
            <div class="itemAi">
                <div class="avatarBox">
                    <img class="avatar" src="/assets/images/fa5552c2eb7e4ee4973355450b6d7811.jpeg" alt="">
                </div>
                <div class="message">
                    <p>您好,请问有什么需要帮助吗？</p>
                </div> 
            </div>
        </div>
        <van-cell-group inset>
            <van-field
                v-model="sms"
                center
                clearable
            >
                <template #button>
                    <van-button @click="submit" size="small" type="primary">发送</van-button>
                </template>
            </van-field>
        </van-cell-group>
    </div>

</template>

<script setup>
    import { getCurrentInstance, ref } from "vue";
    let sms = ref("")
    const onClickLeft = () => history.back();
    const container = ref(null)
    const submit = async () =>{
        let mes = sms.value
        // 清空对话框
        sms.value = ""
        // 创建item
        const newItem = document.createElement("div")
        newItem.className = "item"
        newItem.innerHTML =  `
                <div class="message">
                    <p>${mes}</p>
                </div>
                <div class="avatarBox">
                    <img class="avatar" src="${userInfo.avatar_text}" alt="">
                </div>
        `
        container.value.appendChild(newItem)
        // 发送请求
        let result = await proxy.$POST({
            url:"/product/customer",
            params:{
                message:mes
            }
        })
        
        if(result.result == 0){
            let message = result.content.replaceAll("{br}","\n")
            // 创建item
            const newItemAi = document.createElement("div")
            newItemAi.className = "itemAi"
            newItemAi.innerHTML =  `
                    <div class="avatarBox">
                        <img class="avatar" src="/assets/images/fa5552c2eb7e4ee4973355450b6d7811.jpeg" alt="">
                    </div>
                    <div class="message">
                        <p>${message}</p>
                    </div>
            `
            container.value.appendChild(newItemAi)
            return false
        }else{
            proxy.$fail(result.content)
            return false
        }
    }

    const {proxy} = getCurrentInstance();
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{}


</script>

<style>
    #customer .van-cell-group{
        margin: 0;
        position: fixed;
        bottom: 10px;
        width: 100%;
        padding: 10px 16px;
        padding-right: 0px;
        border: 2px solid #fafafa;
        background-color: #fafafa;
    }

    #customer .van-cell{
        padding: 0;
    }

    #customer .van-button{
        width: 60px;
        margin-right: 20px;
    }

    .item{
        display: flex;
        justify-content: end;
        padding: .3125rem;
    }

    .itemAi{
        display: flex;
        padding: .3125rem;
    }

    .message{
        padding: .3125rem;
        max-width: 80%;
        background-color:rgb(0,162,232);
        color:#ffffff;
        font-size: 1.25rem;
        border-radius: .625rem;
    }

    .message > p{
        text-align: left;
    }

    .avatarBox{
        margin: 0 .3125rem;
        width: 50px;
        height:50px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .avatar{
        width: 100%;
        height: 100%;
    }

    .content{
        margin-bottom: 4.375rem;
        margin-top: .625rem;
    }
</style>
  
